<template>
	<div class="footers">
    <router-link :to="{path:'/home'}" class="a-link">
      <span class="icon-index">	<i class="iconfont icon-shouye" ></i></span>
      <span class="icon-text" >首页</span>
    </router-link>

    <router-link :to="{path:'/news'}" class="a-link">
      <span class="icon-index" >	<i class="iconfont icon-xin" ></i></span>
      <span class="icon-text">消息</span>
    </router-link>

    <router-link :to="{path:'/profile'}" class="a-link">
      <span class="icon-index" >	<i class="iconfont icon-yonghu" ></i></span>
      <span class="icon-text">我的</span>
    </router-link>
	</div>
</template>

<script>
export default {
  data () {
    return {}
  }
}
</script>

<style scoped>
.footers {
  width: 100%;
  height: 3.5rem;
  background: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
}
.a-link {
  flex: 1;
  display: flex;
  text-align: center;
  flex-direction: column;
  align-items: center;
  padding-top: 0.5rem;
}
.icon-text {
  display: block;
  height: 0.88rem;
  font-size: 0.8rem;
  color: #979797;
  text-align: center;
  padding: 0.38rem 0;
}

.icon-index {
  width: 1.5rem;
  height: 1.2rem;
}
.fa {
  font-size: 1.5rem;
  color: #606063;
}
.iconfont {
  font-size: 1.5rem;
  color: #606063;
}
.router-link-active i {
  color: #1e82d2;
}
.router-link-active span {
  color: #1e82d2;
}
</style>
